<template>
  <div>
    <el-dialog
      v-if="isRook"
      title="添加权限"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="closeFn"
    >
      <el-form ref="form" :model="formDate" :rules="rules" label-width="100px">
        <el-form-item prop="title" label="权限名称">
          <el-input v-model="formDate.title" />
        </el-form-item>
        <el-form-item prop="code" label="权限标识">
          <el-input v-model="formDate.code" />
        </el-form-item>
        <el-form-item prop="description" label="权限描述">
          <el-input v-model="formDate.description" />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="closeFn">取 消</el-button>
        <el-button type="primary" @click="confrimFn">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog
      v-else
      :title="formDate.id?'编辑权限':'添加子权限'"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="closeFn"
    >
      <el-form ref="form" :model="formDate" :rules="rules" label-width="100px">
        <el-form-item prop="title" label="权限名称">
          <el-input v-model="formDate.title" />
        </el-form-item>
        <el-form-item prop="code" label="权限标识">
          <el-input v-model="formDate.code" />
        </el-form-item>
        <el-form-item prop="description" label="权限描述">
          <el-input v-model="formDate.description" />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="closeFn">取 消</el-button>
        <el-button type="primary" @click="confrimFn">确 定</el-button>
      </span>
    </el-dialog>
  </div>

</template>

<script>
import { addFather, addSon, editpermission } from '@/api/permission'
export default {
  props: {
    dialogVisible: {
      type: Boolean,
      default: false
    },
    curId: {
      type: [Number, String],
      default: ''
    },
    isRook: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      formDate: {
        title: '',
        code: '',
        description: ''
      },
      rules: {
        title: [
          { required: true, message: '内容不能为空', trigger: 'blur' },
          { min: 2, max: 10, message: '内容2到10个字', trigger: 'blur' }
        ],
        code: [
          { required: true, message: '内容不能为空', trigger: 'blur' },
          { min: 2, max: 10, message: '内容2到10个字', trigger: 'blur' }
        ],
        description: [
          { required: true, message: '内容不能为空', trigger: 'blur' },
          { min: 2, max: 10, message: '内容2到10个字', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    // 关闭弹窗
    closeFn() {
      this.$emit('update:dialogVisible', false)
      // 清空数据
      this.formDate = {
        title: '',
        code: '',
        description: ''
      }
      // 清除验证规则
      this.$refs.form.resetFields()
    },
    // 确认按钮
    async confrimFn() {
      await this.$refs.form.validate()
      if (this.formDate.id) {
        console.log(83, this.formDate)
        await editpermission(this.formDate)
        this.$message.success('编辑成功')
      } else {
        if (this.curId) {
          await addFather({ ...this.formDate, pid: JSON.stringify(this.curId), type: '2' })
          this.$message.success('添加子权限成功')
        } else {
          await addFather({ ...this.formDate, pid: '0', type: '1' })
          this.$message.success('添加成功')
        }
      }

      this.$emit('fatherFn')
      this.closeFn()
    },
    // 编辑回显
    async getcontent(id) {
      this.formDate = await addSon(id)
      console.log(85, this.formDate)
    }
  }
}
</script>

<style lang="scss">
.el-dialog__header{
    background: #66b1ff;
}
</style>
